<script setup>

// 接收折叠状态
defineProps({
  value: {
    type: String,
    required: true
  },
  collapsed: {
    type: Boolean,
    default: false
  },
  menuOptions: {
    type: Array,
    default: () => [],
    required: true,
  }
})

const emits = defineEmits(['update:value'])

// 处理菜单点击
const handleMenuClick = (key) => {
  emits('update:value', key)
}
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- Logo区域 -->
    <div class="h-16 flex items-center justify-center border-b">
      <n-text v-if="!collapsed" class="text-lg font-bold">
        GobyUI
      </n-text>
      <n-text v-else class="text-lg font-bold">
        G
      </n-text>
    </div>

    <!-- 菜单区域 -->
    <div class="flex-1">
      <n-menu
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          :value="value"
          @update:value="handleMenuClick"
      />
    </div>
  </div>
</template>

<style scoped>

</style>